<template>
  <div>
    <el-dialog title="任务列表" :visible.sync="dialogTableVisible" @close="closeDialog">
      <div class="acea-row row-middle row-between">
        <div class="acea-row row-middle mb5">
          <el-input v-model="trainCode" style="width: 200px;margin-right: 10px" placeholder="配属列号"></el-input>
          <el-button type="primary" @click="">查询</el-button>
          <el-button type="primary" @click="">删除任务列表</el-button>
          <el-button type="primary">EPE任务列表</el-button>
          <el-button type="primary">本地任务列表</el-button>
          <el-button type="primary">加载本地任务明细</el-button>
        </div>
      </div>
      <el-table :data="tableData" :row-class-name="tableRowClassName" border @row-dblclick="rowDbClick" @row-click="handleRowClick">
        <el-table-column property="projectType" label="车型类型" width="150"></el-table-column>
        <el-table-column property="projectNumber" label="车型代号" width="150"></el-table-column>
        <el-table-column property="projectTypeName" label="项目名称"></el-table-column>
        <el-table-column property="trainNo" label="新造厂内列编号"></el-table-column>
        <el-table-column property="carCode" label="车辆号"></el-table-column>
        <el-table-column>
          <template slot-scope="scope">
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer acea-row row-left">
        <div class="epe-tag">
          EPE连接状态：已连接
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogTableVisible: false,
      tableData: [{
        taskId:1,
        projectType: 'E动车',
        projectNumber: 'E32B',
        projectTypeName: '动车、城际车',
        trainNo:'002',
        carCode: 'TC01',
      },{
        taskId:2,
        projectType: 'A动车',
        projectNumber: 'E32B',
        projectTypeName: '动车、城际车',
        trainNo:'002',
        carCode: 'TC01',
      }],
      trainCode:'',
      selectedRows: new Set(),    // 使用 Set 存储选中行 ID
      lastSelectedIndex: -1      // 记录上次选中索引
    }
  },
  methods: {
    closeDialog(){
      this.selectedRows = new Set();
    },
    rowDbClick(row, column, event) {
      console.log(row, column, event);
    },
    // 行点击处理
    handleRowClick(row, column, event) {
      const currentIndex = this.tableData.findIndex(item => item.taskId === row.taskId)
      if (event.shiftKey && this.lastSelectedIndex !== -1) {
        // Shift 连选模式
        this.handleRangeSelection(currentIndex)
      } else {
        // 单选模式
        this.toggleSingleSelection(row.taskId)
      }
      this.lastSelectedIndex = currentIndex
    },
    // 处理范围选择
    handleRangeSelection(currentIndex) {
      const start = Math.min(this.lastSelectedIndex, currentIndex)
      const end = Math.max(this.lastSelectedIndex, currentIndex)

      const rangeIds = this.tableData
          .slice(start, end + 1)
          .map(item => item.taskId)

      this.toggleMultiSelection(rangeIds)
    },
    // 单选切换
    toggleSingleSelection(id) {
      // this.selectedRows.has(id)
      //     ? this.selectedRows.delete(id)
      //     : this.selectedRows.add(id)
      this.selectedRows = new Set([id]) // 用新 Set 覆盖实现单选
      this.$forceUpdate() // 强制更新视图
      console.log("获取数据",this.selectedRows)
    },
    // 多选切换
    toggleMultiSelection(ids) {
      ids.forEach(id => {
        this.selectedRows.has(id)
            ? this.selectedRows.delete(id)
            : this.selectedRows.add(id)
      })
      this.$forceUpdate()
    },
    // 行样式处理
    tableRowClassName({ row }) {
      var className = this.selectedRows.has(row.taskId) ? 'selected-row' : ''
      console.log("leixing",className)
      return className;
    },
    // 清空选择
    clearSelection() {
      this.selectedRows.clear()
      this.lastSelectedIndex = -1
      this.$forceUpdate()
    },
    // 获取选中项
    getSelected() {
      return Array.from(this.selectedRows).map(id =>
          this.tableData.find(item => item.taskId === id)
      )
    }
  }
}
</script>

<style scoped>
/deep/.el-dialog__footer{
  background: #999999;
  padding: 0;
}
/deep/.el-dialog__body{
  padding: 6px;
}
/deep/.el-table .selected-row {
  background-color: #1157FF !important; /* 浅绿色背景 */
  color: #FFF !important;
}
/deep/.el-table tbody tr:hover>td { background-color: #1157FF !important;color: #FFF !important; }
</style>

<style lang="scss" scoped>

.dialog-footer{
  .epe-tag{
    background: #1157FF;
    color: #000;
    font-weight: bold;
    padding: 10px;
  }
}
</style>